<template>
    <view class="homeworkDetails">
		<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" @down="downCallback"  :down="{ native: true }" :up="upOption"
		  @up="upCallback">
		  <!-- tab栏 -->
		  <!-- <u-tabs :list="tabs" :is-scroll="false" v-model="curTab" :active-color="appTheme.mainBg" :duration="0.2" @change="onChangeTab" /> -->
		   <view class="hkd-box">
			  <view class="hkd-list" v-for="(item,index) in list.data" :key="item.id" @click="goDetails(item)">
				   <view class="top-item" @click.stop="togglePanel(item,index)">
					   <view>{{item.title}}</view>
					   <view>
<!-- 						   <text v-if="item.record && item.record.status == 10">待完成：1</text>
						   <u-tag text="重新提交" mode="light" type="success" size="mini" v-else-if="item.record && item.record.status == 20"/>
						   <u-tag text="已完成" mode="light" type="success" size="mini" v-else-if="item.record && item.record.status == 30"/> -->	   
						   <u-tag text="进行中" mode="light" type="success" size="mini" v-if="item.status && item.status == 10"/>
						   <u-tag text="已结束" mode="light" type="success" size="mini" v-else-if="item.status && item.status == 20"/>
						   <u-icon name="arrow-down" class="arrow" :class="{ 'rotate': item.isOpen }"></u-icon>
					   </view>
				   </view>
				   <view class="hkd-bottom-s" :style="{ display: item.isOpen ? 'flex' : 'none' }">
					   <view>
						   <view class="title-s">
							   <text>作业名称：</text> {{item.title}}
						   </view>
						   <view class="content-s">
							   <text>作业介绍：</text> {{item.desc}}
						   </view>
						   <view class="content-s">
								<text>创建时间：</text> {{ item.created_at ? formattedDate(item.created_at) : '-'}}
						   </view>
						   <view class="content-s">
							   <text>提交截止时间：</text> {{item.deadline ? formattedDate(item.deadline) : '-'}}
						   </view>
						   <view class="content-s">
							   <text>最近提交时间：</text> {{ item.record && item.record.submit_at ? formattedDate(item.record.submit_at) : '-'}}
						   </view>
						<!--   <view class="content-s">
							   <text>状态：</text> 
							   <u-tag text="未提交" mode="light" type="success" size="mini" v-if="item.record && item.record.status == 10"/>
							   <u-tag text="重新提交" mode="light" type="success" size="mini" v-else-if="item.record && item.record.status == 20"/>
							   <u-tag text="已完成" mode="light" type="success" size="mini" v-else-if="item.record && item.record.status == 30"/>
						   </view> -->
					   </view>
					   <u-button shape="circle" size="mini" type="primary" @click.stop="goDoHomework(item)" style="margin: 0;" v-if="!item.record || item.record && item.record.status != 30">写作业</u-button>
				   </view>
			  </view>
		   </view>
	    </mescroll-body>
	</view>
</template>

<script>
 import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
 import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
 import * as homeworkApi from '@/api/homework'
 // tab栏数据
  const tabs = [{
    name: `未完成`,
    value: 'all'
  }, {
    name: `已完成`,
    value: 'payment'
  }, {
    name: `草稿箱`,
    value: 'delivery'
  }]
  // 每页记录数量
  const pageSize = 15
  export default {
	mixins: [MescrollMixin],
    data() {
      return {
		  // tab栏数据
		  tabs,
		  // 当前标签索引
		  curTab: 0,
		// 上拉加载配置
		upOption: {
		  // 首次自动执行
		  auto: true,
		  // 每页数据的数量; 默认10
		  page: { size: pageSize },
		  // 数量要大于4条才显示无更多数据
		  noMoreSize: 4,
		  // 空布局
		  empty: {
			tip: '亲，暂无作业记录'
		  }
		},
		// 订单列表数据
		list: getEmptyPaginateObj(),
		courseId: '',
		isOpen: false, // 控制面板的展开状态
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.courseId = options.courseId
    },

    methods: {
	  // 刷新数据	
	  refreshData() {
		console.log('刷新数据')
		const app = this
		// 设置列表数据
		app.getOrderList(1)
		  .then(list => {
			  console.log(list,'list')
		    const curPageLen = list.items.length
		    const totalSize = list.total
		    app.mescroll.endBySize(curPageLen, totalSize)
		  })
		  .catch(() => app.mescroll.endErr())
	  },
      /**
       * 上拉加载的回调 (页面初始化时也会执行一次)
       * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
       * @param {Object} page
       */
      upCallback(page) {
        const app = this
        // 设置列表数据
        app.getOrderList(page.num)
          .then(list => {
			  console.log(list,'list')
            const curPageLen = list.items.length
            const totalSize = list.total
            app.mescroll.endBySize(curPageLen, totalSize)
          })
          .catch(() => app.mescroll.endErr())
      },
	  // 获取订单列表
	  getOrderList(pageNo = 1) {
	    const app = this
	    return new Promise((resolve, reject) => {
	      homeworkApi.homeworkSub({ courseId: Number(app.courseId), page: pageNo }, { load: false })
	        .then(result => {
	          // 合并新数据
	          const newList = this.initList(result.data)
	          app.list.data = getMoreListData(newList, app.list, pageNo) //result.data.items // getMoreListData(newList, app.list, pageNo)
	          resolve(newList)
	        })
	    })
	  },
	  // 初始化订单列表数据
	  initList(newList) {
	    newList.items.forEach(item => {
	      item.isOpen = true
	    })
	    return newList
	  },
	  // 切换标签项
	  onChangeTab(index) {
	    const app = this
	    // 设置当前选中的标签
	    app.curTab = index
	    // 刷新订单列表
	    // app.onRefreshList()
	  },
	  formattedDate(val) {
	    const date = new Date(val * 1000);
	    const year = date.getFullYear();
	    const month = String(date.getMonth() + 1).padStart(2, '0');
	    const day = String(date.getDate()).padStart(2, '0');
	    const hours = String(date.getHours()).padStart(2, '0');
	    const minutes = String(date.getMinutes()).padStart(2, '0');
	    const seconds = String(date.getSeconds()).padStart(2, '0');
	    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	  },
	  goDetails(val) {
	  	this.$navTo('pages/user/homework/homeworkDetails', { id: val.id })
	  },
	  
	  // 刷新订单列表
	  onRefreshList() {
	    this.list = getEmptyPaginateObj()
	    setTimeout(() => {
	      this.mescroll.resetUpScroll()
	    }, 120)
	  },
	  
	  goDoHomework(val) {
		  this.$navTo('pages/user/homework/submitHomework', { id: val.id})
	  },
	  
	  togglePanel(val,index) {
	    this.isOpen = !this.isOpen; // 切换面板状态
		this.list.data[index].isOpen = !this.list.data[index].isOpen
	  }
    }
  }
</script>

<style lang="scss" scoped>
 .homeworkDetails{
	 .hkd-box{
		  padding: 16rpx;
		 .hkd-list{
			 background-color: #fff;
			 border-radius: 14rpx;
			 padding: 30rpx;
			 margin-bottom: 22rpx;
			 .top-item{
				 display: flex;
				 justify-content: space-between;
				 // padding-bottom: 25rpx;
			 }
			 .title-s{
				line-height: 50rpx;
				padding: 25rpx 0 0 0;
				font-size: 30rpx;
			 }
			 .content-s{
				 color: #999;
				 margin-top: 20rpx;
				 font-size: 24rpx;
			 }
			 .hkd-bottom-s{
				margin-top: 25rpx;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				transition: height 0.3s ease;
				overflow: hidden;
				border-top: 1rpx solid #eee;
			 }
			 .arrow {
				 margin-left:20rpx;
			   transition: transform 0.3s ease;
			 }
			 .rotate {
			   transform: rotate(180deg); /* 箭头旋转 */
			 }
		 }
	 }
 }
</style>